<template>
	<el-card class="swiper-container">
		<template #header>
			<div class="header">
				<el-button type="primary" :icon="Plus" @click="handleAdd">增加</el-button>
			</div>
		</template>
		<el-table
			:load="state.loading"
			ref="multipleTable"
			:data="state.tableData"
			tooltip-effect="dark"
			style="width: 100%"
			@selection-change="handleSelectionChange"
		>
			<el-table-column
				type="selection"
				width="55">
			</el-table-column>
			<el-table-column
				prop="permissionName"
				label="权限名"
				width="200">
			</el-table-column>
			<el-table-column
				prop="permissionChar"
				label="权限字符"
			>
			</el-table-column>
			<el-table-column
				prop="createTime"
				label="添加时间"
				width="200"
			>
			</el-table-column>
			<el-table-column
				label="操作"
				width="600"
			>
				<template #default="scope">
					<el-button type="primary" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
					<el-button type="danger" @click="deleteOne(scope.$index,scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			background
			layout="prev, pager, next"
			:total="state.total"
			:page-size="state.pageSize"
			:current-page="state.currentPage"
      :page-count="state.pages"
			@current-change="changePage"
		/>
	</el-card>
  <DialogAddPre ref='addPre' :reload="getCarousels" :type="state.type"/>
</template>

<script setup>
import {onMounted, reactive, ref, toRefs} from 'vue';
import {ElMessage} from 'element-plus';
import {Plus, Delete} from '@element-plus/icons-vue';
import axios from '@/utils/axios';
import {permissionList , permissionDelete} from '@/api/permission';
import DialogAddPre from "@/components/sysComp/DialogAddPre.vue";

const addPre = ref();
const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  currentPage: 1,
  pageSize: 10,
  pages:1,
  type: 'add', // 操作类型,
  multipleSelection: [], // 选中项
  total: 0 // 总条数
});

onMounted(() => {
  getCarousels();
});
// 获取轮播图列表
const getCarousels = async () => {
  state.loading = true;
  await permissionList({
    pageNumber: state.currentPage,
    pageSize: state.pageSize
  }).then(res => {
    console.log('当前查询结果为=>', res);
    state.tableData = res.data.data.records;
    state.total = res.data.data.pages;
    state.currentPage = res.data.data.current;
    state.pages = res.data.data.pages;
    state.loading = false;
  });
};
// 添加轮播项
const handleAdd = () => {
  console.log('addPre - 添加', addPre.value);
  state.type = 'add';
  addPre.value.open();
};
// 修改轮播图
const handleEdit = (index, row) => {
  state.type = 'edit';
  addPre.value.open(row);
};
// 选中之后的change方法，一旦选项有变化，就会触发该方法。
const handleSelectionChange = (val) => {
  state.multipleSelection = val;
};
// 批量删除
const handleDelete = () => {
  if (!state.multipleSelection.length) {
    ElMessage.error('请选择项');
    return;
  }
  axios.delete('/carousels', {
    data: {
      ids: state.multipleSelection.map(i => i.carouselId)
    }
  }).then(() => {
    ElMessage.success('删除成功');
    getCarousels();
  });
};
const changePage = (val) => {
  state.currentPage = val;
  getCarousels();
};

const deleteOne = async (index, row) => {
  console.log('删除', index)
  await permissionDelete(row.permissionId).then(() => {
    ElMessage.success('删除成功');
    getCarousels();
  }).catch((e) => {
    ElMessage.error('删除失败！' + e.message);
  });
};
</script>

<style>

</style>
